// 信息公开
<template>
  <div class="infolist">
    <comTitle class="flex">
      <template #title>
        信息列表
        <span
          class="more"
          @click="
            () => {
              wait.waitVisible = true;
            }
          "
          >新增</span
        ></template
      >
    </comTitle>
    <scroll class="echarts">
      <div class="imgList">
        <div
          class="imgItem"
          v-for="(item, index) in imgList"
          :key="index"
          @click="handleAttachmentClick(item)"
        >
          <img
            :src="require('@/assets/images/info/news_item1.svg')"
            alt=""
            class="imgStyle"
          />
          <div class="mt-20">{{ item.fileName }}</div>
        </div>
      </div>
      <paging @onPage="onPage" @onNum="onNum" :total="total" />
    </scroll>
    <!-- 文件上传 -->
    <el-dialog
      :visible.sync="wait.waitVisible"
      append-to-body
      custom-class="waitDialog"
      width="34%"
      @close="
        () => {
          wait.waitVisible = false;
        }
      "
    >
      <comTitle slot="title">
        <template #title>
          <span class="fs-24 mr-16">文件上传</span>
        </template>
      </comTitle>
      <div class="flex-center">
        <el-upload
          class="upload-demo mt-40"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
          :http-request="handlePreview"
          :file-list="form.fileList"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <div class="waitButton" @click="submitUpload">
        <span>提交</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { filefindPage, fileuploadFile, downloadFile } from "@/http/api";
export default {
  name: "infolist",
  data() {
    return {
      wait: {
        waitVisible: false,
      },
      imgList: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      form: {
        fileList: [], //上传文件
        fileList1: {}, //上传文件存储
      },
    };
  },
  mounted() {
    this.initfilefindPage();
  },
  methods: {
    //附件下载
    handleAttachmentClick(item) {
      // console.log("item.url", decodeURIComponent(item.url));
      window.open(item.url);
      // const params = {
      //   fileName: item.fileName,
      //   filePath: item.url,
      // };
      // await downloadFile(item.url, params, item.fileName); //参数1：数据、参数2：文件名称
    },
    //上传文件
    handlePreview(file) {
      this.form.fileList1 = file.file;
    },
    //提交上传
    submitUpload() {
      let fd = new FormData();
      fd.append("file", this.form.fileList1);
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      fileuploadFile(fd, config).then((res) => {
        this.$notify({
          title: "成功",
          message: "上传成功！",
          type: "success",
        });
        this.initfilefindPage();
        this.wait.waitVisible = false;
        this.form = {
          fileList: [], //上传文件
          fileList1: {}, //上传文件存储
        };
      });
    },
    /* 确定按钮 */
    onPage(val) {
      this.pageSize = val;
      this.initfilefindPage();
    },
    onNum(val) {
      this.pageNum = val;
      this.initfilefindPage();
    },
    async initfilefindPage() {
      let res = await filefindPage({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      });
      if (res.code === 20000) {
        this.total = res.data.total;
        this.imgList = res.data.rows;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.infolist {
  padding: 0px 24px;
  height: 100%;
  .more {
    cursor: pointer;
    margin-left: 24px;
    width: 90px;
    height: 28px;
    border: 1px solid #00bfb1;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #00bfb1;
    line-height: 28px;
  }
  .bottom-wrap {
    left: 48px !important;
    right: 48px !important;
    position: absolute;
    bottom: 40px;
  }
  .echarts {
    .imgList {
      padding: 24px;
      display: flex;
      flex-wrap: wrap;
      .imgItem {
        cursor: pointer;
        text-align: center;
        margin-right: 2.2%;
        margin-bottom: 16px;
        border-radius: 1px;
        width: 18%;
        height: 18%;
        .imgStyle {
          width: 80%;
          height: 80%;
          padding: 20px;
          border: 1px solid #00bfb1;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .imgItem:nth-child(5n) {
        margin-right: 0px !important;
      }
    }
  }
}
</style>
<style lang="scss">
.el-dialog.waitDialog {
  height: 450px !important;
  .el-dialog__close {
    top: auto !important;
  }
  .el-date-editor .el-range__icon {
    line-height: 34px !important;
  }
  .el-dialog__body {
  }
  .el-textarea {
    width: 80% !important;
  }
  .commonTitle{
    height: 60px !important;
  }
  .el-range-separator {
    line-height: 30px !important;
  }
  .waitButton {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    span {
      display: inline-block;
      color: #00bfb1;
      line-height: 28px;
      cursor: pointer;
      width: 90px;
      height: 28px;
      border: 1px solid #00bfb1;
      border-radius: 2px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>